$color:#f9f9f9;
$banxin:690rem;
$theme:#f8e24a;
*{
    padding: 0;
    margin: 0;
    
}
.index{
    width: 750rem;
    margin-bottom: 260rem;
    overflow: hidden;
    .indexhead{
        width: $banxin;
        
        display: flex;
        justify-content: start;
        margin: 0 auto;
        margin-top: 90rem;
        
        span{

            font-size: 50rem;

            color: $color;
            font-weight: 500;

        }
    }
    //头部歌单
    .gedanlist{
        width: 750rem;
        overflow: scroll;
        overflow-y: hidden;
        /* 隐藏滚动条 */
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
        .innerbox{
            width: 3300rem;
            margin-top: 70rem;
            display: flex;
            overflow: scroll;
            padding-left: 30rem;
            overflow-y: hidden;
            /* 隐藏滚动条 */
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
            .gedan{
                margin-right: 15rem;
            }

        }
       
        
    }
    // 电台
    .diantai{
        
        
      
        .dttitle{
            
            color: #838383;
            font-size: 30rem;
            display: flex;
            justify-content: start;
            align-items: center;
            margin-left: 30rem;
            font-weight: 700;
            margin-top: 60rem;


        }
        .diantailist{  
            width: 690rem;
            height: 230rem;
            display: flex;
            justify-content: start;
            align-items: center;
            box-sizing: border-box;
            background-color: #fff;
            padding: 30rem 0;
            // padding-left: 35rem;
            margin: 0 auto;
            margin-top: 35rem;
            border-radius: 10rem;
            // height: 200rem;
            // flex-direction: column;
            // overflow: hidden;
            animation: gradient 20s infinite  ease ;
            overflow: hidden;
            overflow: auto;
            transition: 1s;
            .list{
                
               
                box-sizing: border-box;
                
                // background-color: red;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                
                // padding: 30rem 0rem;
                .diantaimodel{
                    margin-right: 30rem;
                }
               
            }
    
            }
    
    }
    // 每日推荐
    .dayrecommand{
        .daytitle{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 690rem;
            span{
                   
                color: #838383;
                font-size: 30rem;
                display: flex;
                justify-content: start;
                align-items: center;
                margin-left: 30rem;
                font-weight: 700;
                margin-top: 60rem;
            }
        }
        .daycontent{
            width: $banxin;
            margin: 0 auto;
            margin-top: 35rem;
            display: flex;
            justify-content: space-between;
            // background-color: red;
            .dayleft{
    
            }
            .dayright{
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: start;
                margin-left: 25rem;
                // background-color: pink;
                .righttitle{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    // background-color: green;
                    span{
                        font-size: 35rem;
                        font-weight: 900;
                        color: #fb444c;
                    }
                }
                .dailyinfo{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: start;
                    color: #858585;
                    font-size: 27rem;
                    font-weight: 700;
                }
                .user{
                      
                      width: 200rem;
                         height: 60rem;
                         border-radius: 60rem;
                         box-sizing: border-box;
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         color: #100000;
                         font-size: 20rem;
                         z-index: 10;
                        //  background-color: red;
                         position: relative;
                         overflow: hidden;
                         bottom: 20rem;
                         
                         .mask{
                             width: 200rem;
                             height: 60rem;
                             position: absolute;
                             top: 0;
                             z-index: 999;
                             background-color: #fff;
                             opacity: 0.1;
                             
                            //  background-color: #fff;
                         }
                         
                         img{
                             position:absolute;
                             top: 5rem;
                             left: 5rem;
                             z-index: 2;
                             width: 50rem;
                             height: 50rem;
                             border-radius: 50rem;
                         }
                         span{
                             color: #f7f4f1;
                             font-weight: 600;
                         }
                }
    
    
    
            }
        }
    }
    // 其它每日推荐
    .otherdaily{
        width: $banxin;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        margin-top: 60rem;
    }
    // 精选歌单
    .jingxuan{
        width: 100%;
        margin: 0 auto;
        .daytitle{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 690rem;
            margin-top: 80rem;
            margin-left: 30rem;
            span{
                   
                color: #838383;
                font-size: 30rem;
                display: flex;
                justify-content: start;
                align-items: center;
                // margin-left: 30rem;
                font-weight: 700;
                margin-top: 60rem;
            }
        }
        .jingxuancontent{
            
            width: 100%;
            padding-left: 30rem;
            display: flex;
            overflow: hidden;
            margin: 0 auto;
            height:500rem;
            margin-top: 40rem;
            &::-webkit-scrollbar {
                width: 0 !important;
              }
             &::-webkit-scrollbar {
                width: 0 !important;height: 0;
             }
    
          
            overflow-x:scroll;
            .small{
                margin-right: 15rem;
            }
        }
    }
    // 新鲜发行
    .freshmusic{
        margin: 0 auto;
        width: 690rem;
        // overflow: hidden;
        .daytitle{
            display: flex;
            justify-content: start;
            align-items: center;
            width: 690rem;
            // margin-top: 80rem;
            // margin-left: 30rem;
            
            
            
            span{
                color: #838383;
                font-size: 30rem;
                display: flex;
                justify-content: start;
                align-items: center;
                // margin-left: 30rem;
                font-weight: 700;
                
            }
            .bottom-right{
                width: 90rem;
                height: 60rem;
                margin-left: 20rem;
                background-color: $theme;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 60rem;
                span{
                    font-size: 30rem;
                    color: #000;
                }

            }

        }
        .freshcontent{
            margin-top: 30rem;
            .music{
                margin-bottom: 30rem;
            }
        }

        
    }
    
    
   
}
// 电台轮播图
.my-swipe .van-swipe-item {
    color: #fff;
    padding-left: 15rem;
    font-size: 20rem;
    // line-height: 150rem;
    text-align: center;
    // background-color: #39a9ed;
  }



@keyframes gradient{
    0%{
        background-image: linear-gradient(45deg, #ff9a9e 0%, #9ad0c4 99%, #fad0c4 100%);
        transition: all 3.0;
    }
    20%{
        background-image: linear-gradient(45deg, #ef9a9c 0%, #8ad0c4 99%, #fbd0c4 100%);
        transition: all 3.0;
    }
    40%{
        background-image: linear-gradient(45deg, #df9a9f 0%, #7ad0c4 99%, #fcd0c4 100%);
        transition: all 3.0;
        
    }
    60%{
        background-image: linear-gradient(45deg, #da9b9e 0%, #6ad0c4 99%, #fdd0c4 100%);
        transition: all 3.0;
        
    }
    80%{
        background-image: linear-gradient(45deg, #ea9a9e 0%, #5ad0c4 99%, #fed0c4 100%);
        transition: all 3.0;
    }
    100%{
        background-image: linear-gradient(45deg, #ff9a9e 0%, #4ad0c4 99%, #ffd0c4 100%);
        transition: all 3.0;
        
    }
}

